<template>
	<view class="wrap">
		<view v-if="lists.length <= 0" class="intext">--暂无数据--</view>
		<view v-else>
			<view class="item" v-for="(item,index) in lists" :key="index" @click="handleDetail(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<!-- <view class="detail">
					<view class="name">{{item.name}}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onReady,onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { ref,onMounted } from 'vue';
	import request from '../../utils/request';
	
	let lists = ref([])
	let page = ref(1)
	let last_page = ref(1)
	onLoad(() => {
		getData()
	})
	
	onReachBottom(() => {
		if(page.value == last_page.value){
			uni.$u.toast('已经是最后一页了')
		}else{
			page.value++
			getData()
		}
	})
	
	const getData = () => {
		if (page.value == 1) {
			lists.value = []
		}
		request.get('Document/index', {data: {page: page.value}}).then(res=>{
			last_page.value = res.data.last_page
			if (res.code == 1) {
				res.data.data.forEach((item,index) => {
					lists.value.push(item)
				})
			} else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		}).catch(err=>{
			console.log(err);
		})
	}
	
	const handleDetail = (item) => {
		uni.navigateTo({
			url: '/pages/articleDetail/articleDetail?id=' + item.id
		})
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
		box-sizing: border-box;
		
		.item {
			display: flex;
			flex-direction: column;
			margin-bottom: 24rpx;
			
			image {
				width: 100%;
				height: 360rpx;
			}
			
			.detail {
				padding: 12rpx;
				box-sizing: border-box;
				
				.name {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
				}
			}
		}
	}
</style>